import React, { Component } from 'react'
import axios from 'axios'

class Comp1 extends React.Component {
  render() {
    return <h1>comp1</h1>
  }
}

const Comp2 = () => {
  return <h1>comp2</h1>
}


export default class HotShowing extends Component {
  constructor() {
    super();
    this.state = {
      total: 0,
      showComp1: true,
      // datalist: [{ "id": 1, "name": "太原" }, { "id": 2, "name": "北京" }]
      datalist: []
    }
  }
  render() {
    return (
      <div>

        {
          this.state.showComp1 ? <Comp1></Comp1> : <Comp2></Comp2>
        }

        <ul>
          {
            this.state.datalist.map((item) => {
              return <li key={item.id}>id:{item.id}-name:{item.name}</li>
            })
          }
        </ul>
        总和：{this.state.total}
      </div>
    )
  }

  sum() {
    let total = this.state.datalist.reduce((count, item) => {
      return count += item.num;
    }, 0)
    this.setState({
      total
    })
  }

  async componentDidMount() {
    // setTimeout(()=>{
    //   this.setState({
    //     showComp1:false
    //   })
    // },2000)
    let rs = await axios.get('http://127.0.0.1:8088/api/datalist')
    this.setState({
      datalist: rs.data.list
    },()=>{
      this.sum();
    })
    
    console.log(rs)
  }
}
